<template>
  <div class="hello">
    {{text}}
   {{fullName}}
   {{counter}}
  <slot-temp ref="slotComp">
    <!-- <p slot="niubi">niubi</p>
    <p slot="buniubi">buniubi</p> -->
    <p>作用域插槽</p>
  <p slot-scope="props">{{props.value}}</p>
  </slot-temp>
  <router-link to="/life">niubiniubi</router-link>
  </div>
</template>

<script>
import slotTemp from '@/components/slot'
import {mapState} from 'vuex'


export default {
  beforeRouteEnter (to, from, next) {
    // ...
    //对数据的获取或者操作在next的回调中操作
    next(vm=>{
      vm.text=5
    })
  },
  // beforeRouteUpdate(to, from, next) {
  //   next()
  // },
  // beforeRouteLeave (to, from, next) {
  //   next()
  // },
  name: 'HelloWorld',
  components:{
    slotTemp:slotTemp
  },
  data () {
    return {
      text:1
    }
  },
  mounted(){
    setInterval(() => {
      this.text += 1
    }, 1000);
    let i =1
    setInterval(() => {
        // vuex赋值
      this.$store.commit('updatecount',i++)
    }, 1000);

    },
  computed:{
      ...mapState({
          counter:(state)=>state.count
      }),
    //   count(){
    //     //   vuex取值
    //       return this.$store.state.count
    //   },
      fullName(){
          return this.$store.getters.fullName
      }
  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
